<template>
  <Modal v-model="modal" title="替换名称" :closable="false" :footer-hide="true" >
    <Form ref="formItem" :model="formItem" :label-width="80">
      <FormItem label="替换前" prop="inputBefore">
        <Input
          v-model="formItem.inputBefore"
        ></Input>
      </FormItem>
      <FormItem label="替换后" prop="inputAfter">
        <Input
          v-model="formItem.inputAfter"
        ></Input>
      </FormItem>
      <FormItem>
            <Button @click="handleComfirm" type="primary">确认</Button>
            <Button @click="handleCancel('formItem')"  style="margin-left: 8px">取消</Button>
        </FormItem>
    </Form>
  <tip-modal ref="tipModal" @on-confirm="handleTipConfirm" @on-refresh="handleRefresh" :newStr="formItem.inputAfter" :nodeId="nodeId" :oldStr="formItem.inputBefore"/>
  </Modal>
</template>

<script>
import TipModal from './tip';
export default {
  model: {
    prop: 'value',
    event: 'on-visible-change'
  },
  components: {
    TipModal
  },
  props: {
    title: String,
    nodeId: Number
  },
  data () {
    return {
      modal: false,
      formItem: {
        inputAfter: '',
        inputBefore: ''

      }
    };
  },
  methods: {
    show () {
      this.modal = true;
    },
    hidden () {
      this.modal = false;
    },
    handleComfirm () {
      console.log('确认');
      this.$refs.tipModal.show();
    },
    handleCancel (form) {
      this.$refs[form].resetFields();
      this.modal = false;
    },
    handleTipConfirm () {
      this.hidden();
      this.$refs.formItem.resetFields();
    },
    handleRefresh () {
      this.hidden();
      this.$refs.formItem.resetFields();
      this.$emit('on-refresh');
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .ivu-modal-body {
    padding:30px;
    padding-left:0
}
</style>
